<template>
  <view class="normal-login-container">
    <view class="login-form-content">
      <view class="input-item">
        <view class="input-label font-34">手机号</view>
        <input
          v-model="loginForm.phone"
          class="input"
          type="number"
          placeholder="请输入手机号"
          maxlength="11"
        />
      </view>
      <view class="input-item">
        <view class="input-label font-34">验证码</view>
        <view class="flex">
          <input
            v-model="loginForm.VerificationCode"
            type="number"
            class="input"
            style="flex: 1"
            placeholder="请输入验证码"
            maxlength="6"
          />
          <text v-if="codeTime === 0" @click="getcode" style="color: #0081ff"
            >发送验证码</text
          >
          <text v-else>{{ codeTime }}</text>
        </view>
      </view>
      <view class="action-btn">
        <button
          @click="handleLogin"
          class="login-btn cu-btn block bg-blue lg round"
        >
          下一步
        </button>
      </view>
    </view>
  </view>
</template>
  
  <script>
export default {
  data() {
    return {
      globalConfig: getApp().globalData.config,
      loginForm: {
        phone: "",
        VerificationCode: "",
      },
      codeTime: 0,
      IntervalLs: null,
    };
  },
  created() {},
  methods: {
    // 登录方法
    async handleLogin() {
      if (this.loginForm.phone === "") {
        this.$modal.msgError("请输入手机号");
      } else if (this.loginForm.VerificationCode === "") {
        this.$modal.msgError("请输入验证码");
      } else {
        this.$modal.loading("验证中，请耐心等待...");
        setTimeout(() => {
          this.$modal.closeLoading();
          this.jump("/pages/changePassword/pwd/index");
        }, 300);
      }
    },
    jump(url) {
      this.$tab.navigateTo(url);
    },
    getcode() {
      this.codeTime = 60;
      this.IntervalLs = setInterval(() => {
        if (this.codeTime === 0) {
          clearInterval(this.IntervalLs);
        } else {
          this.codeTime--;
        }
      }, 1000);
    },
  },
};
</script>
  
  <style lang="scss">
page {
  background-color: #ffffff;
}

.normal-login-container {
  width: 100%;
  padding: 15%;
  font-weight: 700;
  .login-form-content {
    margin-top: 15%;
    .input-item {
      margin: 20px auto;
      padding: 10px 0;
      border-bottom: 1px solid #eee;
      .input-label {
        margin-bottom: 20px;
      }
      .input {
        width: 100%;
        font-size: 14px;
        font-weight: 300;
        line-height: 20px;
        text-align: left;
      }
    }
    .login-btn {
      margin-top: 40px;
      height: 45px;
    }
  }
}
</style>
  